<template>
    <div id="app">
      <div id="searchConditions">
        <el-row :gutter="20">
        	<el-col :span="12">
            	<el-input v-model="t.active_name" placeholder="考试名称"></el-input>
            </el-col>
        </el-row>
	     <br>
        <el-row style="text-align: center;margin-top:20px;">
            <el-col :span="24" size="large">
              <el-button @click="search" type="primary" size="large ">查询</el-button>
            </el-col>
        </el-row>
      </div>
    <div style="padding: 20px;text-align: left">
      <el-button-group>
			  <el-button type="primary" @click="importData">导入考生排考信息</el-button>
        <el-button type="primary" @click="editExamineeStatus">设置考生状态无效</el-button>
      </el-button-group>
    </div>
        <el-table :data="examinees.item" v-loading="loading"
          style="width:100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="ACTIVE_NAME" align="center" label="考试名称">
            </el-table-column>
            <el-table-column prop="NAME" align="center" label="姓名">
            </el-table-column>
            <el-table-column prop="CODE" align="center" label="准考证号">
            </el-table-column>
            <el-table-column prop="EXAMINATION_ROOM_NO" align="center" label="考场号">
            </el-table-column>
            <el-table-column prop="CLASSROOM" align="center" label="教室">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="examinees.pageNumber"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="examinees.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="examinees.total">
        </el-pagination>
        <el-dialog title="考生信息导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
          <div>
            <form class="upload" method="post" enctype="multipart/form-data">
                <input type="file" @change="getFile($event)">
                <el-button type="primary" size="small" :disabled="processing" @click="submit($event)">{{uploadTip}}</el-button>
                <div slot="tip">上传考生信息(只能上传.xls文件)</div>
                <div slot="tip">
                  <a href="./static/template/examineeTemplate.xls">下载文件模版</a>
                </div>
            </form>
          </div>
        </el-dialog>
    </div>
</template>
<script>
    import { getExamineeInfo, updateExamieeInfo } from '@/api/examinationArrangement'
    import _ from 'lodash'
    import { mapGetters } from 'vuex'
    import axios from 'axios'
    export default {
      name: 'invigilatorArrangement',
      data() {
        return {
          examinees: {
            total: 0,
            pageNumber: 1,
            pageSize: 20,
            item: []
          },
          file: '',
          loading: false,
          multipleSelection: [],
          multipleSelectionIds: '',
          dialogFormVisible: false,
          dialogImportVisible: false,
          uploadTip: '提交',
          uploadData: {
            filename: 'examinee.xls'
          },
          processing: false,
          currentPageNumber: 1,
          t: {
            active_name: ''
          }
        }
      },
      computed: {
        ...mapGetters([
          'name',
          'roles'
        ])
      },
      mounted: function() {
        this.loading = true
        const param = {
          'pageSize': this.examinees.pageSize,
          'pageNumber': this.examinees.pageNumber,
          'active_name': this.t.active_name,
          'username': this.name
        }
        getExamineeInfo(param.pageSize, param.pageNumber, param.active_name, param.username).then(response => {
          this.examinees.item = response.result
          this.examinees.total = response.totalRows
          this.loading = false
        }).catch(error => {
          console.log(error)
          this.loading = false
          this.$message.error('获取考生信息失败')
        })
      },
      methods: {
        getFile() {
          this.file = event.target.files[0]
          this.beforeUpload(this.file)
          console.log(this.file)
        },
        submit: function(event) {
          event.preventDefault()
          this.uploadTip = '正在上传中...'
          this.processing = true
          const formData = new FormData()
          formData.append('file', this.file)
          axios.post('/api/student/import', formData).then(response => {
            this.$message.success(response.data.message)
            this.refetchCurrentPage()
            this.uploadTip = '提交'
            this.processing = false
          }).catch(error => {
            console.log(error)
            this.$message.error('文件上传失败')
            this.uploadTip = '提交'
            this.processing = false
          })
        },
        handleSizeChange: function(val) {
          this.loading = true
          const param = {
            'pageSize': val,
            'pageNumber': this.examinees.pageNumber,
            'active_name': this.t.active_name,
            'username': this.name
          }
          getExamineeInfo(param.pageSize, param.pageNumber, param.active_name, param.username).then(response => {
            this.examinees.item = response.result
            this.examinees.total = response.totalRows
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.loading = false
            this.$message.error('获取考生信息失败')
          })
        },
        handleCurrentChange: function(val) {
          this.loading = true
          this.currentPageNumber = val
          const param = {
            'pageSize': this.examinees.pageSize,
            'pageNumber': val,
            'active_name': this.t.active_name,
            'username': this.name
          }
          getExamineeInfo(param.pageSize, param.pageNumber, param.active_name, param.username).then(response => {
            this.examinees.item = response.result
            this.examinees.total = response.totalRows
            this.examinees.pageNumber = val
            this.examinees.pageSize = param.pageSize
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.loading = false
            this.$message.error('获取考生信息失败')
          })
        },
        handleSelectionChange: function(val) {
          const that = this
          let ids = ''
          that.multipleSelection = []
          _.each(val, function(value, key) {
            that.multipleSelection.push(value.ID)
            ids += value.ID + ','
          })
          that.multipleSelectionIds = (ids.substring(ids.length - 1) === ',') ? ids.substring(0, ids.length - 1) : ids
        },
        search: function() {
          this.loading = true
          const param = {
            'pageSize': 20,
            'pageNumber': 1,
            'active_name': this.t.active_name,
            'username': this.name
          }
          this.currentPageNumber = 1
          getExamineeInfo(param.pageSize, param.pageNumber, param.active_name, param.username).then(response => {
            const data = response.result
            this.examinees.item = data
            this.examinees.total = response.totalRows
            this.examinees.pageNumber = 1
            this.examinees.pageSize = 20
            _.each(data, function(value) {
              value.checked = false
            })
            this.loading = false
          }).catch(error => {
            this.loading = false
            console.log(error)
          })
        },
        importData: function() {
          this.dialogImportVisible = true
        },
        editExamineeStatus: function() {
          if (this.multipleSelection.length < 1) {
            this.$message({
              message: '未选中任何数据',
              type: 'warning',
              duration: 3000
            })
            return
          }
          const that = this
          that.loading = true
          const param = {
            'ids': that.multipleSelectionIds
          }
          updateExamieeInfo(param.ids).then(response => {
            that.loading = false
            that.refetchCurrentPage()
          }).catch(error => {
            that.loading = false
            console.log(error)
            that.$message.error('设置考生状态无效失败')
          })
        },
        beforeUpload(file, fileList) {
        // 上传前配置
          const excelfileExtend = '.xls, .xlsx'// 设置文件格式
          console.log(file.path)
          const fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
          if (excelfileExtend.indexOf(fileExtend) <= -1) {
            this.$message.error('文件格式错误')
            return false
          }
        },
        refetchCurrentPage: function() {
          this.loading = true
          const param = {
            'pageSize': this.examinees.pageSize,
            'pageNumber': this.currentPageNumber,
            'active_name': this.t.active_name,
            'username': this.name
          }
          getExamineeInfo(param.pageSize, param.pageNumber, param.active_name, param.username).then(response => {
            const data = response.result
            this.examinees.item = data
            this.examinees.total = response.totalRows
            _.each(data, function(value) {
              value.checked = false
            })
            this.loading = false
          }).catch(error => {
            this.loading = false
            console.log(error)
            this.$message.error('获取考生数据失败')
          })
        }
      }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:1px solid;
        padding:10px;
    }
  table {
        font-size:12px;
        line-height:10px;
    }
  .upload {
        border:1px solid;
        margin:50px;
        padding:20px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
 a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
</style>